<template>
	<!-- 页面原有内容 -->
	<view class="page-content">
		...这里是你的页面内容...
	</view>

	<!-- 
  movable-area 覆盖整个屏幕。
  注意：这里我们不需要缩放，所以 scale-area 保持默认的 false 即可。
  即使设为 true 也无影响，因为 movable-view 没有开启 scale。
-->
	<movable-area class="global-movable-area">

		<!-- 
    这是我们的悬浮按钮。
    direction="all" 允许全向移动。
    scale="false" (默认) 禁止缩放。
    通过 x, y 设置初始位置在右下角。
  -->
		<movable-view class="fab-view" direction="all" :x="initialX" :y="initialY">
			<view class="fab-content">客服</view>
		</movable-view>

	</movable-area>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.page-content {
		/* ... */
	}

	/* movable-area 必须有确定的尺寸 */
	.global-movable-area {
		position: fixed;
		/* 固定定位，覆盖在所有内容之上 */
		top: 0;
		left: 0;
		width: 100vw;
		/* 视口宽度，即整个屏幕宽 */
		height: 100vh;
		/* 视口高度，即整个屏幕高 */
		z-index: 999;
		pointer-events: none;
		/* 关键：让 area 本身不接收点击，只有 view 接收 */
	}

	.fab-view {
		/* 悬浮按钮的大小 */
		width: 60px;
		height: 60px;
		pointer-events: auto;
		/* 关键：让 view 重新可以接收点击 */
	}

	.fab-content {
		width: 100%;
		height: 100%;
		background-color: #007aff;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}
</style>